<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" /> 
<title>음성 녹음 테스트</title>

<style type="text/css">
h1, h2, h3, h4, h5, h6, p, div, ul, ol, li, code, pre, form, fieldset, blockquote, html, body {
	margin: 0;
	padding: 0;
	font-size: 100%;
	font-weight: normal;
	font-family: "맑은 고딕", Arial;
  -moz-opacity: .999;
}
table {
	border-collapse: collapse; /* prevents double borders */
	border-spacing: 0;

	border-left: 1px solid #A7A37E;
	border-right: 1px solid #A7A37E;
	border-bottom: 1px solid #A7A37E;
}
td, th {
	border:0;
	font-size: 1em;
	padding: 4px;
	text-align:center;
	text-valign:center;
}
td.text, td.capture {
	text-align:left;
	padding-right:15px;
}
td.capture {
	width: 300px;
}
td.score {
	width:100px;
}
th {
	font-weight: bold !important;
	border-bottom: 1px solid #333333;
	background: url(images/th_bg.png) repeat-x;
	border-top: 1px solid #333333;
	padding-top: 4px;
	border-left: 1px solid #A7A37E;
}
.even {
	background-color: #E7F7FF;
}
.highlight {
	background-color: #FC6 !important;
}
.play {
	cursor:pointer;
}
input.speech {
	color:transparent;
	background-color:transparent;
	border:0px;
	width:15px;
	height:13px;
	cursor:pointer;
	padding-bottom:5px;
		
	-webkit-transform: scale(2.0, 2.0);
	-moz-transform: scale(2.0, 2.0);
	-ms-transform: scale(2.0, 2.0);
	transform: scale(2.0, 2.0);
}
</style>


<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript">
$(document).ready(function() {
	// 테이블 행 강조하기
	$('table.striped tr:even').addClass('even');
	$('table.striped tbody tr').mouseover(function() {
		$(this).addClass('highlight');
	}).mouseout(function() {
		$(this).removeClass('highlight');
	});
	
	// 음성듣기 이미지를 클릭했을 때
	$('.play').bind('click', function() {
			var id = $(this).attr('id');
			var audio = new Audio('audio/day' + id + '.mp3');
			audio.play();
	});

	// 마이크에 음성을 녹음한 후 점수 찍기
	$('input').bind('webkitspeechchange', function(event) {
		if(event.target.value == null) {
			alert("캡쳐된 음성이 없습니다.");
			return;
		}
		
		var source = $(this).parent().parent().children('.text').children('.source');
		var result = $(this).parent().parent().children('.text').children('.result');

		// 소스 문자열을 공백을 기준으로 배열로 만든다.
		var arr = source.html().split(' ');
		var arr2 = new Array(arr.length);

		// arr에서 . , !등을 뺀 순수 값만을 arr2에 복사
		
		var limit_char =  /[ '\{\}\[\]\/?.,;:|\)*~`!^\-_+┼<>@\#$%&\'\"\\\(\=]/gi;  
				
		for(var i=0; i<arr.length; i++) {
			arr2[i] = arr[i].replace(limit_char,"");
		}

		captureText = event.target.value.toLowerCase().replace(limit_char,"");

		// 색깔 칠하고 점수 구하기
		var resultText = "";
		var score = 0;
		var founded = -1;

		for(var i=0; i<arr2.length; i++) {
			var index = captureText.indexOf(arr2[i].toLowerCase());

			if(index == -1 || index <= founded) {
				resultText = resultText + "<span style='color:red'>" + arr[i] + "</span>&nbsp;";
			} else {
				founded = index;
				score++;
				resultText = resultText + arr[i] + "&nbsp;";
			}
		}

		score = score/arr2.length * 100;
		if(score < 60)
			score = "<span style='color:red'>" + parseInt(score) + "</span>";
		else
			score = "<span>" + parseInt(score) + "</span>";
		
		result.html(resultText);
		result.show();
		source.hide();		

		$(this).parent().parent().children('.capture').children('span').html(event.target.value);
		$(this).parent().parent().children('.score').children('span').html(score);
	});
});
</script>

</head>

<body>
	<table class="striped">
		<thead>
			<tr>
				<th>녹음</th>
				<th>음성</th>
				<th>연습문장</th>
				<th>캡쳐된문장</th>
				<th>점수</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><input id="input" class="speech" type="text" x-webkit-speech lang="en"/></td>
				<td class="play" id="01"><img src="images/speak.png" height="23" width="23"/></td>
				<td class="text"><span class="source">Hi, everybody.</span><span class="result"></span></td>
				<td class="capture"><span></span></td>
				<td class="score"><span></span></td>
			</tr>
			<tr>
				<td><input id="input" class="speech" type="text" x-webkit-speech lang="en"/></td>
				<td class="play" id="02"><img src="images/speak.png" height="23" width="23"/></td>
				<td class="text"><span class="source">This Father's Day weekend,</span><span class="result"></span></td>
				<td class="capture"><span></span></td>
				<td class="score"><span></span></td>
			</tr>
			<tr>
				<td><input id="input" class="speech" type="text" x-webkit-speech lang="en"/></td>
				<td class="play" id="03"><img src="images/speak.png" height="23" width="23"/></td>
				<td class="text"><span class="source">I'd like to spend a couple minutes</span><span class="result"></span></td>
				<td class="capture"><span></span></td>
				<td class="score"><span></span></td>
			</tr>
			<tr>
				<td><input id="input" class="speech" type="text" x-webkit-speech lang="en"/></td>
				<td class="play" id="04"><img src="images/speak.png" height="23" width="23"/></td>
				<td class="text"><span class="source">talking about what's sometimes my hardest,</span><span class="result"></span></td>
				<td class="capture"><span></span></td>
				<td class="score"><span></span></td>
			</tr>
			<tr>
				<td><input id="input" class="speech" type="text" x-webkit-speech lang="en"/></td>
				<td class="play" id="05"><img src="images/speak.png" height="23" width="23"/></td>
				<td class="text"><span class="source">but always my most rewarding job</span><span class="result"></span></td>
				<td class="capture"><span></span></td>
				<td class="score"><span></span></td>
			</tr>
			<tr>
				<td><input id="input" class="speech" type="text" x-webkit-speech lang="en"/></td>
				<td class="play" id="06"><img src="images/speak.png" height="23" width="23"/></td>
				<td class="text"><span class="source">being a dad.</span><span class="result"></span></td>
				<td class="capture"><span></span></td>
				<td class="score"><span></span></td>
			</tr>
			<tr>
				<td><input id="input" class="speech" type="text" x-webkit-speech lang="en"/></td>
				<td class="play" id="07"><img src="images/speak.png" height="23" width="23"/></td>
				<td class="text"><span class="source">I grew up without my father around.</span><span class="result"></span></td>
				<td class="capture"><span></span></td>
				<td class="score"><span></span></td>
			</tr>
			<tr>
				<td><input id="input" class="speech" type="text" x-webkit-speech lang="en"/></td>
				<td class="play" id="08"><img src="images/speak.png" height="23" width="23"/></td>
				<td class="text"><span class="source">He left when I was two years old,</span><span class="result"></span></td>
				<td class="capture"><span></span></td>
				<td class="score"><span></span></td>
			</tr>
			<tr>
				<td><input id="input" class="speech" type="text" x-webkit-speech lang="en"/></td>
				<td class="play" id="09"><img src="images/speak.png" height="23" width="23"/></td>
				<td class="text"><span class="source">and even though my sister and I were lucky enough</span><span class="result"></span></td>
				<td class="capture"><span></span></td>
				<td class="score"><span></span></td>
			</tr>
			<tr>
				<td><input id="input" class="speech" type="text" x-webkit-speech lang="en"/></td>
				<td class="play" id="10"><img src="images/speak.png" height="23" width="23"/></td>
				<td class="text"><span class="source">to have a wonderful mom</span><span class="result"></span></td>
				<td class="capture"><span></span></td>
				<td class="score"><span></span></td>
			</tr>
			<tr>
				<td><input id="input" class="speech" type="text" x-webkit-speech lang="en"/></td>
				<td class="play" id="11"><img src="images/speak.png" height="23" width="23"/></td>
				<td class="text"><span class="source">and caring grandparents to raise us,</span><span class="result"></span></td>
				<td class="capture"><span></span></td>
				<td class="score"><span></span></td>
			</tr>
			<tr>
				<td><input id="input" class="speech" type="text" x-webkit-speech lang="en"/></td>
				<td class="play" id="12"><img src="images/speak.png" height="23" width="23"/></td>
				<td class="text"><span class="source">I felt his absence.</span><span class="result"></span></td>
				<td class="capture"><span></span></td>
				<td class="score"><span></span></td>
			</tr>
			<tr>
				<td><input id="input" class="speech" type="text" x-webkit-speech lang="en"/></td>
				<td class="play" id="13"><img src="images/speak.png" height="23" width="23"/></td>
				<td class="text"><span class="source">And I wonder what my life would have been like</span><span class="result"></span></td>
				<td class="capture"><span></span></td>
				<td class="score"><span></span></td>
			</tr>
			<tr>
				<td><input id="input" class="speech" type="text" x-webkit-speech lang="en"/></td>
				<td class="play" id="14"><img src="images/speak.png" height="23" width="23"/></td>
				<td class="text"><span class="source">had he been a greater presence.</span><span class="result"></span></td>
				<td class="capture"><span></span></td>
				<td class="score"><span></span></td>
			</tr>
		</tbody>
	</table>
</body>
</html>
